'use client'

import Link from 'next/link'
import { Home, ArrowLeft, Search, FileText } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export default function NotFound() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
            <FileText className="h-8 w-8 text-muted-foreground" />
          </div>
          <CardTitle className="text-2xl">页面未找到</CardTitle>
          <p className="text-muted-foreground mt-2">
            抱歉，您访问的页面不存在或已被移动
          </p>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="text-center text-sm text-muted-foreground">
            <p>错误代码: 404</p>
            <p>可能的原因:</p>
            <ul className="mt-2 space-y-1 text-left">
              <li>• 页面地址输入错误</li>
              <li>• 页面已被删除或移动</li>
              <li>• 您没有访问权限</li>
            </ul>
          </div>
          
          <div className="flex flex-col space-y-2">
            <Button asChild>
              <Link href="/">
                <Home className="h-4 w-4 mr-2" />
                返回首页
              </Link>
            </Button>
            <Button variant="outline" asChild>
              <Link href="/knowledge">
                <Search className="h-4 w-4 mr-2" />
                浏览知识库
              </Link>
            </Button>
          </div>
          
          <div className="text-center">
            <Button 
              variant="ghost" 
              size="sm" 
              onClick={() => history.back()}
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              返回上页
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
